﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>js分页</title>

<style type="text/css">
a {
	color: #333333;
	text-decoration: none;
}

.pageBar {
	height: 30px;
	line-height: 30px;
	overflow: hidden;
	padding: 6px;
	text-align: center;
}

.pageBar a {
	border: 1px solid #D4E5F7;
	cursor: pointer;
	display: inline-block;
	height: 18px;
	line-height: 18px;
	padding: 2px 8px;
	margin-left: 5px;
}

.pageBar .now {
	background: none repeat scroll 0 0 #0066CC;
	color: #FFFFFF;
}

.pageBar a:hover {
	color: #06C;
}

a:link,a:visited,a:active {
	color: #003278;
	text-decoration: none;
}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
</head>

<body>

	<div class="pageBar" id="pageBar"></div>

</body>

<script>
xpage(125,12,'page=');
//page
function xpage(totalPage,nowPage,url) {

	var parrHtml = '<a class="etc">..</a>';
	var lastHtml = '<a href="' + url + (nowPage - 1) + '" class="pageLast">上一页</a>';
	var nextHtml = '<a href="' + url + (nowPage+1) + '" class="nextLast">下一页</a>';
	var ctrlHtml = '<a class="go-page">到第 <input type="text" id="Page" maxnum="' + totalPage + '" size="4" value="1"> 页</a><a class="view">确定</a>';
	var listHtml = '';
	var maxList = 5; //连续页码显示数
	var midList = Math.round(maxList/2);
	
	function listPrint(pageNum) {
		var nowPlus = (pageNum == nowPage) ? ' class="now"' : '';
		return '<a href="#' + url + pageNum + '"' + nowPlus + '>' + pageNum + '</a>';
	}
	

	if(totalPage == 1) {$('#pageBar').html('<a>共1页</a>'); return;}
	if(totalPage < (maxList + 5)) {
		for(i = 1; i <= totalPage; i++) {
			listHtml += listPrint(i);
		}
	} else {
		listHtml += listPrint(1);
		var listA = 2;
		var listB = (totalPage - nowPage > midList + 1) ? (nowPage + midList - 1) : totalPage - 1;
		if(nowPage - 1 > midList + 1) {
			listA = nowPage - midList + 1; 
		} else {
			listB = listA + maxList;
		}
		
		if(listA - 1 > 1) listHtml += parrHtml;
		for(i = listA; i <= listB; i++) {
			listHtml += listPrint(i);
		}
		if(totalPage - listB > 1) listHtml += parrHtml;
		listHtml += listPrint(totalPage);
	}
	
	
	if(nowPage > 1) {listHtml = lastHtml + listHtml;}
	if(nowPage < totalPage) {listHtml = listHtml + nextHtml;}
	
	$('#pageBar').html(listHtml + ctrlHtml);
	
}
</script>














</html>